<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <div class="Container100 TexAlCenter">
                                <i class="icon-mountains14 Red Fs130 MarTop20" style="line-height:1 !important;"/>
                            </div>
                            <h1 class="TexAlCenter Fs40 Red">Volt Documentation</h1>
                            <div class="EmptyBox40"/>
                            <p:panel>
                                <div class="Fs20 TexAlCenter Red">Visibilites, Floating And Width Settings on Devices</div>
                                <div class="EmptyBox10"/>
                                <p:panelGrid columns="3" styleClass="Wid100">
                                    <h:outputText value="Class Group" styleClass="Orange Fs20 Wid30"/>
                                    <h:outputText value="Class Name" styleClass="Orange Fs20 Wid30"/>
                                    <h:outputText value="Instructions" styleClass="Orange Fs20 Wid40"/>

                                    <h:outputText value="Visibilities According To The Platform" styleClass="Fs20 Wid30"/>
                                    <h:outputText value="ShowOnMobile" styleClass="Blue Wid30"/>
                                    <h:panelGroup>
                                        Only visible on screen widths smaller than 960px.
                                    </h:panelGroup>

                                    <h:outputText styleClass="Fs20 Wid30"/>
                                    <h:outputText value="ShowOnDesktop" styleClass="Blue Wid30"/>
                                    <h:panelGroup>
                                        Only visible on screen widths bigger than 960px.
                                    </h:panelGroup>

                                    <h:outputText value="Floating According To The Platform" styleClass="Fs20 Wid30"/>
                                    <h:outputText value="FloatNoneOnMobile" styleClass="Blue Wid30"/>
                                    <h:panelGroup>
                                        Removes floating on screen widths smaller than 960px.
                                    </h:panelGroup>

                                    <h:outputText value="Width Setting For The Platform" styleClass="Fs20 Wid30"/>
                                    <h:outputText value="WidAutoOnMobile" styleClass="Blue Wid30"/>
                                    <h:panelGroup>
                                        Switches to auto width on screen widths smaller than 640px so that element with depends on its content.
                                    </h:panelGroup>

                                    <h:outputText value="Height Setting For The Platform" styleClass="Fs20 Wid30"/>
                                    <h:outputText value="HeiAutoOnMobile" styleClass="Blue Wid30"/>
                                    <h:panelGroup>
                                        Switches to auto height on screen widths smaller than 640px so that element with depends on its content.
                                    </h:panelGroup>
                                </p:panelGrid>
                            </p:panel>
                            <p:panel>
                                <div class="Container">
                                    <div class="Container100">
                                        <div class="Container70 Responsive50">
                                            <p:inputText placeholder="Only visible if screen width is smaller than 960px." styleClass="Fleft Wid90 ShowOnMobile" />
                                            <div class="EmptyBox10"/>
                                            <p:inputText placeholder="Only visible if screen width is bigger than 960px." styleClass="Fleft Wid90 ShowOnDesktop" />
                                            <div class="EmptyBox10"/>
                                            <p:inputText placeholder="Cc;" styleClass="Fleft Wid90" />
                                        </div>
                                        <div class="EmptyBox10 ShowOnMobile"/>
                                        <div class="Container30 Responsive50">
                                            <p:inputTextarea placeholder="Floating is removed if screen width is smaller than 960px"
                                                             cols="20"
                                                             rows="5"
                                                             styleClass="Wid90 Fright FloatNoneOnMobile"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="EmptyBox10"/>
                                <div class="Separator"/>
                                <div class="EmptyBox10"/>
                                <div class="Container">
                                    <div class="Container100">
                                        <div class="Container40 Responsive50">
                                            <p:inputText placeholder="InputField 1" styleClass="Fleft Wid90" />
                                            <div class="EmptyBox10"/>
                                            <p:inputText placeholder="InputField 2" styleClass="Fleft Wid90" />
                                            <div class="EmptyBox10"/>
                                            <p:inputText placeholder="InputField 3" styleClass="Fleft Wid90" />
                                        </div>
                                        <div class="EmptyBox10 ShowOnMobile"/>
                                        <div class="Container60 Responsive50">
                                            <p:inputTextarea placeholder="This element is floated right and will still be floated on smaller screens causing layout issues since it does not have FloatNoneOnMobile."
                                                             cols="20"
                                                             rows="5"
                                                             styleClass="Wid90 Fright"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="EmptyBox10"/>
                                <div class="Separator"/>
                                <div class="EmptyBox10"/>

                                <div class="Container">
                                    <div class="Container30 OrangeBack White WidAutoOnMobile">
                                        <div class="ContainerIndent">This element has 30% width on bigger screens and auto width on smaller screens as it uses WidAutoOnMobile.</div>
                                    </div>
                                </div>

                                <div class="EmptyBox10"/>
                                <div class="Separator"/>
                                <div class="EmptyBox10"/>

                                <div class="Container">
                                    <div class="Container30 RedBack White HeiAutoOnMobile" style="height:300px;">
                                        <div class="ContainerIndent">This element has 300px height on bigger screens and auto height on smaller screens as it uses HeiAutoOnMobile.</div>
                                    </div>
                                </div>
                            </p:panel>
                            <div class="EmptyBox60"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>